<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_getGridCellInfos"></title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .sidebar-config-wrap {
            position: absolute;
            top: 0;
            right: 0;
            height: 100vh;
            width: 400px;
            padding: 20px;
            background: #fff;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            box-shadow: -2px 0 8px rgb(0 0 0 / 15%);
        }

        .sidebar-config-wrap .panel-group .panel {
            border-color: transparent;
            background: transparent;
            color: rgba(0, 0, 0, 0.85);
        }

        .sidebar-config-wrap .panel .panel-heading {
            background: #fafafa;
            color: rgba(0, 0, 0, 0.85);
            border-color: #e8e8e8 !important;
            position: relative;
        }

        .sidebar-config-wrap .panel .panel-heading::before {
            content: '';
            height: 100%;
            width: 2px;
            background: #3394dc;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
        }

        .sidebar-config-wrap .button-group {
            margin: 0 auto;
            margin-top: 20px;
            text-align: center;
        }

        .sidebar-config-wrap .button-group button {
            width: 30%;
            outline: none;
        }

        .sidebar-config-wrap .btn-search {
            width: 24%;
            text-align: center;
            outline: none;
            height: 32px;
            padding: 0 15px;
            font-size: 14px;
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.65);
            border-color: #d9d9d9;
            background-color: rgb(255, 255, 255);
        }

        .sidebar-config-wrap .btn-search:hover,
        .sidebar-config-wrap .btn-search:active,
        .sidebar-config-wrap .btn-search:focus {
            color: #40a9ff;
            border-color: #40a9ff;
            background-color: rgb(255, 255, 255);
            box-shadow: none;
        }

        .sidebar-config-wrap button:focus {
            outline: none !important;
        }

        .sidebar-config-wrap .panel-title a {
            width: 100%;
            display: block;
            text-decoration: none !important;
            overflow: hidden;
        }

        .sidebar-config-wrap .panel-title a span.glyphicon {
            float: right;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded='true'] .glyphicon-chevron-down {
            display: none;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded='false'] .glyphicon-chevron-up {
            display: none;
        }

        .table-containerAll {
            overflow: auto;
            max-height: 475px;
            border-bottom: 1px solid #e8e8e8;
        }

        .table-container {
            max-height: 320px;
            overflow: auto;
            border-bottom: 1px solid #e8e8e8;
            margin-bottom: 10px;
        }

        .table-bordered>thead>tr {
            border-bottom: none !important;
        }

        .table-bordered>thead>tr>th,
        .table-bordered>tbody>tr>td {
            vertical-align: middle !important;
            white-space: nowrap;
            text-align: center;
        }

        .table-bordered>thead>tr>th {
            background: #fafafa;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            border-color: #e8e8e8 !important;
            padding: 16px !important;
            overflow-wrap: break-word;
        }

        .table-bordered>tbody>tr>td {
            text-align: center;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            border-color: #e8e8e8 !important;
            padding: 8px !important;
            overflow-wrap: break-word;
        }

        .btn.btn-default {
            padding-right: 15px;
        }

        .mapboxgl-ctrl .mapbox-gl-draw_trash {
            display: none;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div class="panel-group sidebar-config-wrap" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                        aria-expanded="true" aria-controls="collapseOne">
                        <span data-i18n="resources.text_query"></span>
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body btn-draw">
                    <div class="button-group">
                        <button class="btn btn-primary" id="query" data-i18n="resources.text_query"
                            onclick="queryResult()"></button>
                        <button class="btn btn-primary" id="printBtn" data-i18n="resources.text_reset"
                            onclick="clearSearchResult(true)"></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="exportOptions">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                        href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <span data-i18n="resources.text_queryResult"></span>
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="exportOptions">
                <div id="tableContainerAll" class="panel-body table-containerAll">
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
    <script type="text/javascript" include="draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
        var map, baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World Map/zxyTileImage.png?z={z}&x={x}&y={y}",
            url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data",
            querylist = [],
            bounds;
        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
        map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": [baseUrl],
                        "tileSize": 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                }]
            },
            center: [116, 32],
            zoom: 4
        });

        map.addControl(new mapboxgl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        //mapbox 绘制要素图形控件
        var Draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                point: true,
                circle: true,
                polygon: true,
                trash: true,
            }
        });
        $($('.mapboxgl-ctrl').get(1)).hide();
        map.addControl(Draw, 'top-left')
        function queryResult() {
            var parm = {
                dataSourceName: 'World',
                datasetName: 'WorldEarth'
            };
            var len = querylist.length;
            if (len === 1) {
                if (querylist[0].hasOwnProperty('point')) {
                    parm.X = querylist[0]['point']['x'];
                    parm.Y = querylist[0]['point']['y'];
                } else {
                    parm.bounds = querylist[0];
                }

            } else {
                parm.bounds = querylist;
            }
            var getGridCellInfosParam = new mapboxgl.supermap.GetGridCellInfosParameters(parm);
            new mapboxgl.supermap.GridCellInfosService(url).getGridCellInfos(getGridCellInfosParam).then(res => {
                $('#tableContainerAll').empty();
                appendTable(res);
            })
        }
        map.on('draw.create', function (event) {
            var type = event.features[0].geometry.type;
            if (type === "Polygon") {
                var coordinates = event.features[0].geometry.coordinates[0];
                var len = coordinates.length;
                var points = [];
                for (var i = 0; i < len - 1; i++) {
                    points.push({ 'x': coordinates[i][0], 'y': coordinates[i][1] });
                }
                querylist.push({
                    'points': points
                })
            } else {
                var coordinates = event.features[0].geometry.coordinates;
                querylist.push({
                    'point': {
                        'x': coordinates[0],
                        'y': coordinates[1],
                    }
                })
            }
        })
        function getValuesCount(res) {
            var count = 0;
            if (!res.object.bounds) {
                count += 1;
            } else if (res.object.bounds && !Array.isArray(res.object.bounds)) {
                count += res.result.valuesCount;
            } else {
                var customResult = res.result.customResult;
                for (var i = 0; i < customResult.length; i++) {
                    if (customResult[i].values) {
                        count += customResult[i].valuesCount;
                    } else {
                        count += 1;
                    }
                }
            }
            return count;
        }
        function appendTable(res) {
            if (!res) {
                return;
            }
            if ((res.error && res.error.code === 400) || getValuesCount(res) > 5000) {
                return widgets.alert.showAlert(resources.msg_outOfQueryRange, false);
            }
            // 展开table
            collapseTable();
            if (!res.object.bounds) {
                var tableContainer = createPointTable(res.result, 1);
                $('#tableContainerAll').append(tableContainer);
                return;
            }
            if (res.object.bounds && !Array.isArray(res.object.bounds)) {
                var tableContainer = createAreaTable(res.result.values);
                $('#tableContainerAll').append(tableContainer);
                return;
            }
            if (Array.isArray(res.object.bounds)) {
                var content = res.result.customResult;
                if (content.length === 0) {
                    return;
                }
                for (var i = 0; i < content.length; i++) {
                    if (content[i].values) {
                        var table = createAreaTable(content[i].values);
                        $('#tableContainerAll').append(table);
                    } else {
                        var table = createPointTable(content[i], 1);
                        $('#tableContainerAll').append(table);
                    }
                }
            }
        }
        function clearSearchResult(reset) {
            Draw.deleteAll();
            querylist.length = 0;
            $('#tableContainerAll').empty();
        }
        function collapseTable() {
            $('#collapseTwo').addClass('in');
        }
        function createPointTable(content, index) {
            var tbodyHtml = '';
            tbodyHtml += generateTbodyHtml(1, content);
            return generateTableHtml(tbodyHtml);
        }
        function createAreaTable(values) {
            var tbodyHtml = '';

            var index = 1;
            for (var i = 0; i < values.length; i++) {
                if (values[i].length !== 0) {
                    var values2 = values[i];
                    for (var j = 0; j < values2.length; j++) {
                        var content = values2[j];
                        tbodyHtml += generateTbodyHtml(index, content);
                        index++;
                    }
                }
            }
            return generateTableHtml(tbodyHtml);
        }
        function generateTableHtml(tbodyHtml) {
            var tableContainer = document.createElement('div');
            tableContainer.className = 'table-container';

            var table = document.createElement('table');
            table.className = 'table table-bordered';

            var thead = document.createElement('thead');
            var tbody = document.createElement('tbody');
            table.appendChild(thead);
            table.appendChild(tbody);

            var theadInfo = '<tr><th>' + resources.text_index + '</th><th>' + resources.text_row_index + '</th><th>' + resources.text_column_index + '</th><th>' + resources.text_color_number + '</th><th>' + resources.text_color_rgba + '</th></tr>';
            thead.append(theadInfo);
            thead.innerHTML = theadInfo;
            tbody.innerHTML = tbodyHtml;
            tableContainer.append(table);
            return tableContainer;
        }
        function generateTbodyHtml(index, content) {
            let h = ''
            h += '<tr>' +
                '<td>' +
                index +
                '</td>' +
                '<td>' +
                content.row +
                '</td>' +
                '<td>' +
                content.column +
                '</td>' +
                '<td>' +
                content.value +
                '</td>' +
                '<td>' +
                JSON.stringify(content.color) +
                '</td>' +
                '</tr>';
            return h;
        }
        map.on('draw.delete', function (e) {
            querylist.length = 0;
        });

    </script>
</body>

</html>